<script setup>
import {login} from "@/api/login.js"
import {ref} from "vue";
import router from "@/router/index.js";
import { useTokenStore } from '@/stores/userTokenStore.js'
import {ElMessage} from "element-plus";

const username = ref("")
const password = ref("")
const userStore = useTokenStore()

const handleLogin = async () => {

  const res = await login({
    username: username.value,
    password: password.value
  })
  const {code} = res.data;
  console.log(code)
  if (code === 200) {

    console.log(res.headers.authorization)

    ElMessage.success("登录成功")
    userStore.setToken(res.headers.authorization)
    router.push("/index")

  } else {
    alert("账号或者密码错误")
  }


}
</script>

<template>

  <div>
    <h2>登录</h2>
    <form @submit.prevent="handleLogin">
      <div>
        <label>用户名：</label>
        <input v-model="username" type="text" placeholder="请输入用户名"/>
      </div>
      <div>
        <label>密码：</label>
        <input v-model="password" type="password" placeholder="请输入密码"/>
      </div>
      <button type="submit">登录</button>
    </form>

  </div>
</template>

<style scoped>

</style>